<template>
	<view style="padding-bottom: 30rpx;">
		<!-- <view-head Title="情绪异常提醒" :isShowR="false"></view-head> -->
		<mine-head title="异常提醒" :isShowR="list.length>0?true:false" @callBack="callBack"></mine-head>
		<view class="view-content">
			<view class="list" v-if="list.length>0">
				<view class="item" @click="showPopFn(item,index)" v-for="(item,index) in list" :key="index">
					<view class="icon-box _df _ac _jb">
						<image v-if="item.type == 11" src="@/static/img/index/qxIcon4.png" mode=""></image>
						<image v-else-if="item.type == 7" src="@/static/img/index/qxIcon5.png" mode=""></image>
						<image v-else-if="item.type == 10" src="@/static/img/index/qxIcon6.png" mode=""></image>
						<image v-else-if="item.type == 20" src="@/static/img/index/qxIcon4.png" mode=""></image>
						<view class="time">
							{{item.createTime}}
						</view>
					</view>
					<view class="_df _ac _jb" style="padding: 30rpx 0;">
						<view class="title-box">
							<view class="title _df _jb _ac">
								{{item.title}} <span v-if="item.status == 0"></span>
								
							</view>
							<view class="info">
								{{item.content}}
							</view>
						</view>
						<u-icon class="ml10" name="arrow-right" color="#aaa" size="28"></u-icon>
					</view>
					
					
					
				</view>
				
			</view>
			<view class="" v-else style="padding-top: 250rpx;">
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>
		</view>
		<u-popup v-model="show" mode="center" @close="close" width="80%" height="300rpx" border-radius="14" :closeable="true">
			<view class="popCon">
				{{tips}}
			</view>
		</u-popup>
		<l-loadmore ref="more" :pageindex="page.page"></l-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1:'',
				value2:'',
				value3:'',
				value4:'',
				show:false,
				page:{
					page:1,
					size:10,
					data:{}
				},
				totalPage:1,
				list:[],
				tips:''
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getList()
		},
		methods:{
			callBack(){
				console.log(123)
				let that = this
				uni.$_get({
					url: "delete-message",
					that: that,
					success(res) {
						if(res.code == 0){
							that.getList()
						}
							
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			getList(){
				let that = this
				uni.$_post({
					url: "abnormalMessage",
					that: that,
					params: that.page,
					success(res) {
						let _data = res.data.lists;
						if(res.code == 0){
							_data.map((item) => {
								if(item.createTime) {
									item.createTime = item.createTime.slice(0, 16);
								}
							});
							//分页
							if (_data.length == 0) {
								that.totalPage = 0;
							}
							if (that.page.page > 1) {
								that.list = that.list.concat(_data);
							} else {
								that.list = _data;
							}
							that.$refs.more.status = "loadmore";
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			saveBack(){
				
			},
			change(e){
				
			},
			switchChange(e){
				
			},
			showPopFn(e,index){
				this.list[index].status = 1
				if(e.path.includes('music')){
					uni.reLaunch({
						url: e.path
					})
				}else{
					uni.navigateTo({
						url: e.path
					})
				}
				
				// this.show = true
				// this.tips = this.list[index].content
				// switch (e){
				// 	case 1:
				// 	this.type = 1
				// 	break
				// 	case 2:
				// 	this.type = 2 
				// 	break 
				// 	case 3:
				// 	this.type = 3
				// 	break
				// }
			},
			confirm(e){
				
			},
			close(){
				this.show = false
			}
		},
		//上拉加载更多
		onReachBottom() {
			this.$refs.more.status = "loadmore";
			if (this.totalPage == 0) {
				this.$refs.more.status = "nomore";
				return;
			}
			this.page.page++;
			setTimeout(()=>{
				this.$refs.more.status = "loading";
				this.getList();
			},1000)
			
		},
	}
</script>

<style lang="scss" scoped>
	
.view-content{
	padding: 0 50rpx 0;
	.list{
		padding: 40rpx 0 0;
		.item{
			// height: 160rpx;
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.10); 
			padding: 0 30rpx 0 ;
			margin-bottom: 40rpx;
			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			position: relative;
			.icon-box{
				padding: 15rpx 0;
				border-bottom: 1rpx solid #eeeeee;
				.time{
					font-size: 24rpx;
					font-family: $uni-font-family-Medium;
					color: #aaa;
				}
			}
			image{
				width: 60rpx;
				height: 60rpx;
			}
			.state{
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				
			}
			.title-box{
				overflow: hidden;
				.title{
					font-size: 32rpx;
					font-family: $uni-font-family-Bold;
					color: #171717;
					margin-bottom: 10rpx;
					span{
						margin: 0 auto 0 10rpx;
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						line-height: 20rpx;
						font-family: $uni-font-family-Medium;
						text-align: center;
						font-size: 20rpx;
						color: #fff;
						background-color: #E5423A;
					}
				}
				.info{
					font-size: 26rpx;
					color: #999;
					line-height: 36rpx;
				}
				
			}
			
			
		}
	}
}
.popCon{
	padding: 80rpx 40rpx 0;
	font-size: 30rpx;
	font-family: $uni-font-family-Medium;
	color: #333;
	line-height: 40rpx;
}
</style>
